import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import {
    WhiteSpace,
    WingBlank,
    Flex,
    Icon,
    ListView,
    Button,
    Modal
} from 'antd-mobile';
import Moment from 'moment';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import dianpusvg from "../../assets/img/dianpu.svg";
import rightsvg from "../../assets/img/right.svg";
import {Toast} from "antd-mobile/lib/index";
import './timeBuyItem.less';
class TimeBuyItem extends Component {
    constructor(props) {
        super(props);
        this.timer = null;
        const {dataItem,selectedIndex} = this.props;
        this.state = {
            d:"",
            showHour:"",
            m:"",
            s:"",
            now:this.props.nowTime
        }
    }
    componentDidMount(){
        setInterval(this.countTime, 1000, 1000)
        this.countTime()
    }

    nToS = n => n > 9 ? n : `0${n}`

    judgTime = (time, isDay = false) => {
        var nowTime = new Date();
        var curTime = new Date(time);
        // console.log(curTime, curTime.getDate(), "curTime");
        //
        // console.log(nowTime >= curTime, "判断是否在抢购中。。。。");
        // if (nowTime >= curTime) return "抢购中";

        var day = nowTime.getDate() == curTime.getDate() ? "" : ` ${curTime.getDate()}日 `

        return `${day || (isDay ? "今天" : "")}${this.nToS(curTime.getHours())}:${this.nToS(curTime.getMinutes())} 开抢`
    }

    countTime=()=>{
        //获取当前时间
        const {dataItem,selectedIndex} = this.props;
        // var date = new Date();
        // var now = date.getTime();
        var now = this.state.now;
        //设置截止时间
        var end = dataItem.endTime;
        var start = dataItem.startTime;
        let seconds = selectedIndex==2?parseInt((start - now) / 1000):parseInt((end - now) / 1000);
        // 总的小时数
        let h = Math.floor(seconds / 60 / 60);
        // 天数
        let d = parseInt(h / 24);
        // 显示的小时数
        let showHour = Math.floor(h - d * 24);
        let m = Math.floor((seconds - h * 60 * 60) / 60);
        let s = Math.floor((seconds - h * 60 * 60 - m * 60));
        if (seconds < 0) {
            h = 0;
            m = 0;
            s = 0;
            d = 0;
            showHour = 0;
        }
        this.setState({
           d:d,
            showHour:showHour,
            m:m,
            s:s,
            now:now+1000
        })
    }
    startTime = (time)=>{
        let seconds = parseInt(time / 1000);
        // 总的小时数
        let h = Math.floor(seconds / 60 / 60);
        // 天数
        let d = parseInt(h / 24);
        // 显示的小时数
        let showHour = Math.floor(h - d * 24);
        let m = Math.floor((seconds - h * 60 * 60) / 60);
        let s = Math.floor((seconds - h * 60 * 60 - m * 60));
        if (seconds < 0) {
            h = 0;
            m = 0;
            s = 0;
            d = 0;
            showHour = 0;
        }
       return `${showHour}:${m}`
    }
    render() {
        const {dataItem,selectedIndex,refresh} = this.props;
        const {d,showHour,m,s}=this.state;
        let timeBuyStatus="";
        let mashangButton=false;
        let qiangguangButton=false;
        let tixingButton=false;
        let quxiaoButton=false;
        if(dataItem.activityInventory>0){
            timeBuyStatus = '马上抢';
            mashangButton=true;
        }else{
            timeBuyStatus = '已抢光';
            qiangguangButton=true;
        }
        if(selectedIndex==2){
            switch (dataItem.isRemind) {
                case 0:
                    timeBuyStatus = '提醒我';
                    tixingButton=true;
                    break;
                case 1:
                    timeBuyStatus = '取消提醒';
                    quxiaoButton=true;
                    break;
                default:
                    break;
            }
        }

        let activityId=dataItem.id;
        console.log(this.props.showTime)
        return <div>
            {this.props.showTime?selectedIndex==2?<Flex style={{backgroundColor:"#F7F7F7",padding:".3rem 0",fontSize:".25rem"}}>
                    <WingBlank style={{width:"100%"}}>
                        <Flex justify="between" >
                            <Flex style={{color:"#ff0036",fontSize:".3rem",fontWeight:"bolder"}}>
                                <div className="acb"></div>
                                {/* {this.startTime(dataItem.startTime)}
                                开抢 */}
                                {this.judgTime(dataItem.startTime)}
                            </Flex>
                            <Flex>
                                距开始
                                <span className="timeBuy_startTime">{d<10?"0"+d:d}</span> 天
                                <span className="timeBuy_startTime">{showHour<10?"0"+showHour:showHour}</span>  :
                                <span className="timeBuy_startTime">{m<10?"0"+m:m}</span>:
                                <span className="timeBuy_startTime">{s<10?"0"+s:s}</span>
                            </Flex>
                        </Flex>
                    </WingBlank>
                </Flex>
                :<Flex justify="center" style={{backgroundColor:"#F7F7F7",padding:".3rem 0",fontSize:".25rem"}}>
                距结束
                <span className="timeBuy_time">{d<10?"0"+d:d}</span> 天
                <span className="timeBuy_time">{showHour<10?"0"+showHour:showHour}</span>  :
                <span className="timeBuy_time">{m<10?"0"+m:m}</span>:
                <span className="timeBuy_time">{s<10?"0"+s:s}</span>
            </Flex>:""}

        
                
                <WingBlank  style={{paddingBottom:".3rem",paddingTop:".3rem",borderBottom:"1px solid #e5e5e5"}}>
                        <Flex>
                            <div style={{width:"2rem",height:"2rem",marginRight:".2rem",padding:".2rem"}} onClick={()=>{
                                this.props.dispatch(routerRedux.push({
                                    pathname: `/goodsDetail/${dataItem.specId}`,
                                }));
                            }}>
                                <NoLazyImg src={dataItem.goodsPicture} style={{width:"2rem",height:"2rem"}} />
                            </div>

                            <div style={{width:"100%"}}>
                                <div style={{fontSize:".3rem",lineHeight:".45rem",marginBottom:".2rem"}} className="timeBuyTitle"  onClick={()=>{
                                    this.props.dispatch(routerRedux.push({
                                        pathname: `/goodsDetail/${dataItem.specId}`,
                                    }));
                                }}>{dataItem.goodsName}</div>
                                {dataItem.activityList[0]? <Flex style={{marginBottom:".1rem"}}>
                                    {dataItem.activityList.map((a,b)=>{
                                        return <div key={b} style={{color:"#F8BE59",border:"1px solid #F8BE59",padding:".1rem",marginRight:".2rem"}}>
                                            {a.name}
                                        </div>
                                    })}
                                </Flex>:""}
                                <Flex style={{marginBottom:".4rem"}} onClick={()=>{
                                    this.props.dispatch(routerRedux.push({
                                        pathname: `/goodsDetail/${dataItem.specId}`,
                                    }));
                                }}>
                                    {dataItem.isSelf==1?<div style={{border:"1px solid #F17878",color:"#F17878",padding:".05rem",borderRadius:".1rem",marginRight:".2rem"}}>自营</div>:""}
                                    {selectedIndex==2?<div style={{color:"#00E079"}}>
                                        {dataItem.peopleNum}人已设置提醒
                                    </div>:dataItem.activityInventory==0?<Flex style={{color:"#ff0036"}}>
                                        { Moment(this.props.nowTime-dataItem.startTime).format(' h小时mm分') }抢光{dataItem.activityInventory +dataItem.selledNum>10000?(dataItem.activityInventory +dataItem.selledNum)/10000+"件":(dataItem.activityInventory +dataItem.selledNum)+"件"}
                                    </Flex>:<Flex justify="between" className="jindu">
                                        <span style={{color:"#ff0036",marginLeft:".1rem"}}>已抢{dataItem.selledNum }件</span>
                                        <span style={{color:"#999"}}>{dataItem.sellRate +"%"}</span>
                                        <div className="jinduOne" style={{width:`${dataItem.sellRate+"%"}`}}></div>
                                    </Flex>}

                                </Flex>
                                <Flex justify="between">
                                    {selectedIndex==2?<div style={{color:"#00E079"}} onClick={()=>{
                                        this.props.dispatch(routerRedux.push({
                                            pathname: `/goodsDetail/${dataItem.specId}`,
                                        }));
                                    }}>
                                        ¥<span style={{fontSize:".4rem"}}>{dataItem.activityPrice }</span><span style={{color:"#999",textDecoration:"line-through",marginLeft:".2rem"}}>¥{dataItem.goodsPrice }</span>
                                    </div>:dataItem.activityInventory==0?<div style={{color:"#e5e5e5"}} onClick={()=>{
                                        this.props.dispatch(routerRedux.push({
                                            pathname: `/goodsDetail/${dataItem.specId}`,
                                        }));
                                    }}>
                                        ¥<span style={{fontSize:".4rem"}}>{dataItem.activityPrice }</span><span style={{color:"#999",textDecoration:"line-through",marginLeft:".2rem"}}>¥{dataItem.goodsPrice }</span>
                                    </div>:<div style={{color:"#ff0036"}} onClick={()=>{
                                        this.props.dispatch(routerRedux.push({
                                            pathname: `/goodsDetail/${dataItem.specId}`,
                                        }));
                                    }}>
                                        ¥<span style={{fontSize:".4rem"}}>{dataItem.activityPrice }</span><span style={{color:"#999",textDecoration:"line-through",marginLeft:".2rem"}}>¥{dataItem.goodsPrice }</span>
                                    </div>}

                                    {mashangButton&&selectedIndex!==2&&<Button type='ghost' size='small' inline style={{backgroundColor:"#ff0036",color:"#fff",borderRadius:".5rem"}} onClick={()=>{
                                        this.props.dispatch(routerRedux.push({
                                            pathname: `/goodsDetail/${dataItem.specId}`,
                                        }));
                                    }}>{timeBuyStatus}</Button>}
                                    {qiangguangButton&&selectedIndex!==2&&<Button  size='small' inline style={{backgroundColor:"#e5e5e5",color:"#fff",borderRadius:".5rem"}}>{timeBuyStatus}</Button>}
                                    {tixingButton&&selectedIndex==2&&<Button  size='small' inline style={{backgroundColor:"#00E079",color:"#fff",borderRadius:".5rem"}} onClick={()=>{
                                        this.props.dispatch({type:"timeBuy/timeBuyRemindEFF",obj:{activityId}}).then(result=>{
                                            if (result.code == 200) {
                                                Toast.success(result.msg, 1.5,()=>{
                                                    refresh();
                                                });
                                            } else {
                                                // Toast.fail(result.msg, 1.5);
                                            }
                                        })
                                    }}>{timeBuyStatus}</Button>}
                                    {quxiaoButton&&selectedIndex==2&&<Button  size='small' inline style={{backgroundColor:"#fff",color:"#00E079",borderRadius:".5rem",border:".03rem solid #00E079"}} onClick={()=>{

                                        this.props.dispatch({type:"timeBuy/timeBuyDelRemindEFF",obj:{activityId}}).then(result=>{
                                            if (result.code == 200) {
                                                Toast.success(result.msg, 1.5,()=>{
                                                    refresh();
                                                });
                                            } else {
                                                // Toast.fail(result.msg, 1.5);
                                            }
                                        })
                                    }}>{timeBuyStatus}</Button>}

                                </Flex>
                            </div>
                        </Flex>
                    </WingBlank>
        
        </div>
    }
}

export default connect(({ timeBuy }) => ({ timeBuy }))(TimeBuyItem);
